<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线用户</title>
    <script src="/js/jquery.min.js"></script>
    <script>
        $(function (){
            select();
            reset();
            logOut();
        })
        function select(){
            $("#select").unbind("click").click(function (){
                if ($("#value1").val().trim()!=""||$("#value2").val().trim()!=""){
                    alert("查询无果！")
                }
            })
        }
        function reset(){
            $(".reset").unbind("click").click(function (){
                $("#value1").val("")
                $("#value2").val("")
            })
        }
        function  logOut(){
            $("#logOut").unbind("click").click(function (){
                var remind= confirm("确定要强制选中用户下线吗？")
                if (remind){
                    alert("当前登陆用户无法强退")
                }
            })
        }
    </script>
    <style>
        body{
            background: white;
        }
        *{
            margin: 0px;
            padding: 0px;
        }
        #title{
            background-color: RGB(255,255,253);
            line-height: 60px;
            margin: 20px;
            border: 1px solid #ccc;
            border-radius: 8px;
        }
        #title input{
            line-height: 24px;
        }
        #select,.onLine{
            background-color: RGB(26,179,148);
            color: #FFFFFF;
            padding: 2px 10px 2px 10px;
            border-radius: 5px;
        }
        .reset{
            background-color: RGB(248,172,89);
            color: #FFFFFF;
            padding: 2px 10px 2px 10px;
            border-radius: 5px;
        }
        #showTible{
            margin: 0px auto;
            width: 1300px;
            border: 1px solid #ccc;
            text-align: center;
            font-size: 13px;
        }
        #showTible th{
            line-height: 40px;
            background-color: RGB(239,243,248);
            border-bottom: 2px solid #ccc;
        }
        #limit{
            font-size: 13px;
            margin-left: 30px;
            margin-top: 20px;
        }
        #logOut{
            background-color: RGB(199,84,80);
            color: #FFFFFF;
            padding: 2px 10px 2px 10px;
            border-radius: 5px;
        }

    </style>
</head>
<body>
<div id="fatherDiv">
    <p id="title">
        登录地址：<input type="text" id="value1">
        登录名称：<input type="text" id="value2">
        <input type="button" value="搜索" id="select">&nbsp;&nbsp;
        <input type="button" value="重置" class="reset">
    </p>
    <table id="showTible">
        <tr>
            <th>序号</th>
            <th>会话编号</th>
            <th>登录名称</th>
            <th>部门名称</th>
            <th>主机</th>
            <th>登录地点</th>
            <th>浏览器</th>
            <th>操作系统</th>
            <th>会话状态</th>
            <th>登录时间</th>
            <th>最后访问时间</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>fb4f82d5-6150-4920-84d6-f66aa3d7f39d</td>
            <td>admin</td>
            <td>研发部门</td>
            <td>127.0.0.1</td>
            <td>内网IP</td>
            <td>Chrome 9</td>
            <td>Windows 10</td>
            <td><input type="button" value="在线" class="onLine"></td>
            <td>{{loginTime}}</td>
            <td>{{loginTime}}</td>
            <td><input type="button" value="强退" id="logOut"></td>
        </tr>
    </table>
    <p id="limit">
        第1/1条数据，共1条数据。
    </p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var loginTime = new Vue({
        el: '#showTible',
        data: {
            loginTime: new Date().toLocaleString()
        }
    });
</script>
</html>